import React from "react";
import TodoItem from "./TodoItem";
import { Input, Button, List } from "antd";

// 一般情况一个组件中没有使用到状态，我们就把他抽离为无状态的组件，这样性能上比较的好
const TodoListUI = props => {
	return (
		<div style={{ padding: "10px" }}>
			<div>
				<Input
					style={{ width: "300px", marginRight: "10px" }}
					placeholder="todo info"
					value={props.inputValue}
					onChange={props.handleInputChange}
				/>
				<Button type="primary" onClick={props.handleBtnClick}>
					提交
				</Button>
			</div>
			<List
				style={{ width: "300px", marginTop: "10px" }}
				bordered
				dataSource={props.list}
				renderItem={(item, index) => (
					<TodoItem
						key={index}
						content={item}
						index={index}
						handleItemClick={props.handleItemDelete}
					/>
				)}
			/>
		</div>
	);
};

export default TodoListUI;
